<template>
  <div class="rightwrap">
    <el-tabs style="height:100%" v-model="activeName" type="card" @tab-click="handleClick" :stretch="true">
      <el-tab-pane  label="摘要" name="first">
        <analy/>
      </el-tab-pane>
      <el-tab-pane label="风险总控" name="second">风险总控</el-tab-pane>
      <el-tab-pane label="负向内容探针" name="third">
        <linecont/>
      </el-tab-pane>
      <el-tab-pane label="高频词" name="fourth">
        <highword  ref="highwordRef" v-if="activeName == 'fourth'"/>
      </el-tab-pane>
      <!-- <el-tab-pane label="相似片段" name="fifth">相似片段</el-tab-pane>
      <el-tab-pane label="OCR" name="sixth">OCR</el-tab-pane>
      <el-tab-pane label="台标" name="seventh">台标</el-tab-pane>
      <el-tab-pane label="负向内容" name="eighth">负向内容</el-tab-pane>
      <el-tab-pane label="情感" name="ninth">情感</el-tab-pane>
      <el-tab-pane label="对话问答" name="tenth">对话问答</el-tab-pane> -->
    </el-tabs>



  </div>
</template>

<script>
import analy from './components/analy.vue'
import highword from './components/highword.vue'
import linecont from './components/linecont.vue'
import * as echarts from 'echarts'
// import video from "video.js";
// import { parseTime } from '@/utils/index'
// import { getAlarms, getLuxiang, getAllChannels } from '@/api/device'
// import waves from '@/directive/waves' // waves directive
// import Pagination from '@/components/Pagination' // secondary package based on el-pagination
// import api from '@/api'

export default {
  components: { analy,highword,linecont },
  // directives: { waves },
  props: {
    deviceid: {
      type: Number,
      default: 0
    },
  },
  data() {
    return {
          activeName: 'first', 
      playUrlLeft:'',   //视频地址
      charts: "",
      opinionData: ["155", "400", "900", "800", "300", "900", "270"], // 数据
      allchannels: [],
      list: null,
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 20
      },
      filterForm: {
        create_time_range: [],
        update_time_range: [],
        device_id: '',
        channel_id: '',
        type: ''
      }
    }
  },
  watch:{
    activeName(n,o){
      console.log('o: ', o);
      console.log('n: ', n);
      if(n){
        // this.$bus.$emit("activeName", n);

      }

    },
    immediate:true,
    deep:true
    
  },
  methods: {
    handleClick(tab, event) {
      console.log(this.activeName);
      setTimeout(()=>{
        switch(this.activeName){
          case 'first':
            
            break;
          case 'second':
          
            break;
          case 'fourth':
            this.$refs.highwordRef.initWord()
            break;
        }
        
      },1000)
    },
    drawLine() {
      // 初始化折线图
      this.charts = echarts.init(document.getElementById('mainline'));
 
      // 设置折线图数据和样式
      this.charts.setOption({
        title: {
          left: "3%",
          top: "5%",
          text: "最近一周订单数量", // 自定义
        },
 
        tooltip: {
          trigger: "axis",
        },
 
        legend: {
          align: "right",
          left: "3%",
          top: "15%",
          data: ["近一周"], // 自定义
        },
 
        grid: {
          top: "30%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true,
        },
 
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
 
        // 自定义：设置x轴刻度
        xAxis: {
          type: "category",
          boundaryGap: true,
          axisTick: {
            alignWithLabel: true,
          },
          // 自定义标签
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
 
        // 自定义：设置y轴刻度
        yAxis: {
          type: "value",
          boundaryGap: true,
          splitNumber: 4,
          interval: 250,
        },
 
        // 设置数据
        series: [
          {
            name: "近一周", // 自定义
            type: "line",
            stack: "总量", // 自定义
            data: this.opinionData, // 自定义
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgb(255,200,213)",
                  },
                  {
                    offset: 1,
                    color: "#ffffff",
                  },
                ],
                global: false,
              },
            },
            itemStyle: {
              color: "rgb(255,96,64)",
              lineStyle: {
                color: "rgb(255,96,64)",
              },
            },
          },
        ],
      });
    },
    // vedioJs 相关配置
    async initLeft() {
      // var that = this;
      // this.playerLeft = await video("videoLeft", {
      //   // 视频配置项  //是否显示播放按钮
      //   bigPlayButton: true,
      //   // width: this.widthPlayer || "640",
      //   // height: this.heightPlayer || "360",
      //   playbackRates: [1, 2, 4, 8],
      //   muted: true, // //静音模式   解决首次页面加载播放。
      //   controls: {progressControl: true},
      // });
      // //  if((((this.dataItem.filepath || '').split('.')[1]) || '').toLowerCase() != 'mp4'){
      // //   this.dataItem.filepath = (this.dataItem.filepath || '').split('.')[0] +'.mp4'
      // //   }
      // // !!!!!!!!!!!赋值视频地址
      // // this.playUrlLeft = 'ovi/' + this.dataItem.filepath
      // this.playUrlLeft = 'https://haokan.baidu.com/v?pd=wisenatural&vid=9350290348672847241'
      // window.playerLeft = this.playerLeft
    },




    // getAllChannels() {
    //   getAllChannels().then(data => {
    //     this.allChannels = data.items || []
    //   })
    // },
    // 获取下拉框, 所有频道
    getChannels () {
      var params = {
        // page_no: this.page_no,
        // page_size: this.page_size
        page_no: 0,
        page_size:500
      }
      // if (this.searchForm.createTime && this.searchForm.createTime.length === 2) {
      //   params.createTime = 'range_' + moment(this.searchForm.createTime[0]).format('YYYY-MM-DD') + ',' + moment(this.searchForm.createTime[1]).format('YYYY-MM-DD')
      // }
      return
      // this.spinning = true
      api.getChannels(params).then(res => {
        var resBody = res.data
        if (resBody.code === 0) {
          this.allchannels = resBody.data.item || []
        //   this.datalist = resBody.data
        //   var selectedSDI = this.datalist.map(item => {
        //     if (item.type && item.type.indexOf('SDI') !== -1) {
        //       return item.type
        //     }
        //   })
        //   this.selectedSDI = selectedSDI.filter(item => {
        //     return item
        //   })

        //   this.dataTotal = resBody.data.length
        //   this.spinning = false
        } 
        // else {
        //   this.$message.error(resBody.message || '请求出错！')
        // }
      }).catch(error => {
        // this.spinning = false
        if (error.response && error.response.status === 401) {
          this.$store.dispatch('authentication/resetToken').then(() => {
            this.$router.push({ path: '/login' })
          })
        }
        if (error.response && error.response.data) {
          this.$message.error(error.response.data.message || '获取通道出错！')
        } else {
          // this.$message.error('接口调用失败！')
        }
      })
    },
    beginInterval() {
      var _this = this
      window.timer = window.setInterval(function() {
        _this.getList()
      }, 5000)
    },
    getList() {
      return

      this.listLoading = true
      getAlarms(this.listQuery).then(data => {
        this.list = data.items
        this.total = data.total

        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
        window.clearInterval(window.timer)
      })
    },
    // 搜索
    handleFilter() {
      window.clearInterval(window.timer)
      this.listQuery = {
        page: 1,
        limit: 20
      }
      this.listQuery.device_id = this.deviceid
      if (this.filterForm.create_time_range && this.filterForm.create_time_range.length) {
        this.listQuery.create_time_range = this.filterForm.create_time_range
      }
      if (this.filterForm.update_time_range && this.filterForm.update_time_range.length) {
        this.listQuery.update_time_range = this.filterForm.update_time_range
      }
      if (this.filterForm.channel_id !== '') {
        this.listQuery.channel_id = this.filterForm.channel_id
      }
      if (this.filterForm.type !== '') {
        this.listQuery.type = this.filterForm.type
      }
      this.getList()
      this.beginInterval()
    },
    // new 重置
    resetForm(){
      this.filterForm.create_time_range = []
      this.filterForm.update_time_range = []
      this.filterForm.device_id = ''
      this.filterForm.channel_id = ''
      this.filterForm.type = ''
      this.listQuery.page = 1
      this.listQuery.limit = 20

      this.handleFilter()
    },

    // 原版重置
    // resetForm(formName) {
    //   this.$refs[formName].resetFields()
    //   this.handleFilter()
    // },
    getLuXiang(record) {
      var preTime = 10 // 故障点往前推10秒
      var afterTime = 10 // 故障点往后延10秒
      var params = {}
      params.alarmMsgId = record.id
      params.deviceId = record.device.id
      params.channelId = record.channel.id
      params.startTime = parseTime(new Date(record.starttime).getTime() - preTime * 1000)
      params.endTime = parseTime(new Date(record.recoverytime).getTime() + afterTime * 1000) || parseTime(new Date().getTime())
      getLuxiang(params).then(response => {
        
        if (response.errorMsg) {
          this.$message({
            message: response.errorMsg,
            type: 'error'
          })
        } else {
          var newHash = '/luxiangPlay?path=' + response + '&timeOffset=' + preTime + '&channel=' + record.channel.name + '&startTime=' + record.starttime + '&endTime=' + record.recoverytime + '&downloadAble=1'
          var oldHash = window.location.hash
          var url = window.location.href.replace(oldHash, '#' + newHash)
          window.open(url, '_blank')
        }
      })
    }
  },
  mounted(){
    this.initLeft();    //tcplayer 初始化
    this.drawLine()
    this.getList()
    this.getChannels()
  }

}
</script>
<style lang="less" scoped>
.rightwrap {
  width: 100%;
  height: 100%;
  background: rgb(235, 255, 192);
}
/deep/.el-tabs__content {
  height: calc( 100% - 58px );
  &>div {
    height: 100%;
  }
}

</style>
